<template>
	<coreshop-page title="已核销服务码" mode="left">
		<view class="p-25">
			<view class="goods-box" v-if="state.list.length > 0">
				<view class="item-box" v-for="item in state.list" :key="item.id">
					<view class="order-num">
						<view class="id">
							<text class="tit">编号：{{item.ticket.serviceOrderId}} </text>
						</view>
						<view class="status">
							<uv-tags text="复制核销码" size="mini" type="success"
								@click="handleCopyId(item.ticket.redeemCode)"></uv-tags>
						</view>
					</view>
					<view class="goods" v-if="item.service">
						<view class="item">
							<coreshop-goods-card type="horizontal" imgHeight="160rpx" imgWidth="160rpx"
								:goodsData="hanldeCombinationGoodsData(item)">
								<template #goodPrice>
									<view class="goods-msg">
										<view class="verificationTime">
											核销时间：{{item.ticket.verificationTime}}
										</view>
										<view class="time">
											核销码：{{item.ticket.redeemCode}}
										</view>
									</view>
								</template>
							</coreshop-goods-card>
						</view>
					</view>
					<view class="btn-box">
						<view class="time-box">
							下单时间：{{timeFormat(item.ticket.createTime, 'mm-dd hh:MM:ss')}}
						</view>
						<uv-button @click="handleDelect(item.id)" type="error" size="small" text="删除"></uv-button>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了呀</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { EmptyEnum } from '@/core/enum';
	import { queryVerificationPageList, queryLogDelete } from '@/core/api';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import type { Response } from '@/core/models';
	import { handleShowToast } from '@/core/utils';

	interface QueryParams {
		keyWord : string;
		storeId : number;
	}

	const state = reactive<{
		list : Array<any>;
		page : number;
		totalPages : number;
		storeId : number;
	}>({
		list: [],
		page: 1,
		totalPages: 1,
		storeId: 0,
	})

	onLoad((query : QueryParams) => {
		state.storeId = query?.storeId;
	});

	onShow(() => {
		getVerificationPageList();
	});

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getVerificationPageList();
		}
	});

	const getVerificationPageList = async () => {
		const storelist : Response<any> = await queryVerificationPageList({
			page: state.page,
			limit: 10,
			id: state.storeId
		});
		if (storelist.status) {
			state.totalPages = storelist.otherData.totalPages;
			state.list = state.list.concat(storelist.data)
		} else {
			handleShowToast(storelist.msg)
		}
	}

	/** 组合商品数据传入组件 */
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.id,
			image: item.service.thumbnail,
			name: item.service.title,
			brief: item.service.description,
		}
	}

	/** 复制*/
	const handleCopyId = (id : string) => {
		uni.setClipboardData({
			data: id,
			success: function () {
				handleShowToast('复制成功', 'success')
			}
		});
	}

	/** 删除 */
	const handleDelect = (id : string) => {
		uni.showModal({
			title: '提示',
			content: '删除提货单后将无法找回！',
			async success(res) {
				if (res.confirm) {
					const data : Response<any> = await queryLogDelete({ id, });
					if (data.status) {
						handleShowToast(data.msg, 'success', () => {
							state.page = 1;
							state.list = [];
							getVerificationPageList();
						})
					}
				}
			}
		});
	}
</script>

<style scoped lang="scss">
	@import './list.scss';
</style>